import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import {
    ProForm,
    ProFormText,
    ProFormTextArea,
    ProFormItem
} from '@ant-design/pro-components';
import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-components';
import type {
    ProFormColumnsType,
    ProFormLayoutType,
} from '@ant-design/pro-components';
import { Button } from 'antd';

import { QiniuFileUpload } from '@/components';
import { getNowFormatDate, uuid } from '@/utils';
import { getAntdFormItemType, MetaDataDomain } from '@/services';
import { dsInsert, dsUpdate, dsUpdateById } from '@/services/local';
import { DOMAIN_CLASS_IDENTIFIER } from '@/services/constants';

export interface ObjectCrudEditorProps {
    style?: CSSProperties;
    layoutType: ProFormLayoutType,
    clazz: any;
    excludes?: Array<string>;
    item?: MetaDataDomain;
    onFinish: () => Promise<void> | void;
}

export const ObjectCrudEditor: React.FC<ObjectCrudEditorProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<Array<string>>([]);

    const [columns, setColumns] = useState<ProFormColumnsType<any>[]>([]);

    useEffect(() => {
        let columns = props.clazz.attributes?.filter((item, index) => {
            return !(props.excludes && props.excludes.indexOf(item.name) >= 0)
        }).map((item, index) => {
            console.log(item);
            //valueType: 'switch',
            return {
                title: item.title,
                dataIndex: item.name,
                valueType: getAntdFormItemType(item.data_type, item.value_size),
                formItemProps: {
                    rules: [
                        {
                            required: true,
                            message: '此项为必填项',
                        },
                    ],
                },
                initialValue: ''
            };
        })

        setColumns(columns);
    }, [props.clazz, props.excludes]);

    const requestCallback = useCallback(async () => {
        console.log('---------', props.item);
        if (!props.item) return {};
        if (props.item.icon && props.item.icon.length > 0) {
            setIcon([props.item.icon]);
        }
        return props.item;
    }, [props.item]);

    useEffect(() => { }, [props.item])

    return (
        <Container>
            <BetaSchemaForm<any>
                layoutType={props.layoutType}
                steps={[
                    {
                        title: 'ProComponent',
                    },
                ]}
                rowProps={{
                    gutter: [16, 16],
                }}
                colProps={{
                    span: 12,
                }}
                grid={props.layoutType !== 'LightFilter' && props.layoutType !== 'QueryFilter'}
                onFinish={async (values) => {
                    //TODO 校验
                    values.icon = icon && icon.length > 0 ? icon[0] : '';

                    values = {
                        ...props.item,
                        ...values,
                    };
                    if (props.item) {
                        //编辑
                        await dsUpdateById(0, props.clazz.identifier, props.item.id, values);
                        // let _ = await metaDataUpdateDomain(values);
                    } else {
                        //添加
                        values.identifier = uuid();
                        let _ = await dsInsert(0, props.clazz.identifier, values);
                        // let _ = await metaDataSaveDomain(values);
                    }
                    await props.onFinish();
                }}
                columns={(props.layoutType === 'StepsForm' ? [columns] : columns) as any}
            />
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;